<!DOCTYPE html>
<html>
<head>
	<title>旋转的三角形</title>
	<style type="text/css">
		.box {
			width: 80px;
			height: 80px;
			animation: rotate 6s linear infinite;
		}
		.triangle {
			display: inline-block;
			margin-top: 20px;
			border: 40px solid transparent;
			border-top: 40px solid red;
		}
		@keyframes rotate {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}
	</style>
</head>
<body>
<div class="box"><span class="triangle"></span></div>
</body>
</html>